<template>
	<view class="content ">
        <view class="header">
            
        </view>
        <view class="plr15 ptb15">
                <view class="moduleTitle">请选择日期</view>
                <view class="mt15">
                    <uv-scroll-list>
                    		<view v-for="(item, index) in cateList" :class="[ 'cateItem',  index==current?'active': '']" :key="index" @click="change(index)">
                    			{{item.open_date}} {{ week[item.week_name-1] }}
                    		</view>
                    </uv-scroll-list>
                </view>
                <view class="moduleTitle">请选择时段</view>
                <view class="bgWhite radius6 plr15 ptb15 mb20 mt15 " v-if="cateList.length">
                     <view class="timeBox" >
                            {{cateList[current].start_time}} - {{cateList[current].end_time}}
                     </view>
                </view>
                <view class="justify-between align-center">
                    <view class="moduleTitle">预约人</view>
                    <view class="right " @click="add" >
                        +添加
                    </view>
                </view>
                <view class="bgWhite radius6 plr15 ptb15 mb20 mt15 ">
                     <view class="timeBox" v-if="list.length==0">
						 {{yyData.realname}} <text class="ml10">{{yyData.phone}}</text>
                     </view>
					 <block v-else>
						 <uv-radio-group v-model="appointer_id">
							 <uv-radio
							 	:customStyle="{margin: '8px'}" 
							 	
							 	activeColor="#2CC6A1"
							 	:name="0">
							 	
							 	<view slot="default" class=" timeBox"  >
							 	 {{yyData.realname}} <text class="ml10">{{yyData.phone}}</text>
							 	</view>
							 </uv-radio>
						 		<uv-radio 
						 			:customStyle="{margin: '8px'}" 
						 			v-for="(item, index) in list" 
						 			:key="index" 
						 			activeColor="#2CC6A1"
						 			:name="item.id">
									
									<view slot="default" class=" timeBox"  >
										 {{item.realname}} <text class="ml10">{{item.phone}}</text>
									</view>
						 		</uv-radio>
						 	</uv-radio-group>
					 
					 </block>
                </view>
				<view class="" style="height: 240rpx;">
					
				</view>
        </view>
        <view class=" bgWhite paybtn">
            <view class="" style="color: #979797;font-size: 28rpx;line-height: 56rpx;margin-bottom: 18rpx;">
               点击确认按钮预约即视为已阅读并同意《预约须知》 
            </view>
            <view class="justify-between align-center">
                <view class="freebtn"> 
                合计： <text>￥</text><text style="font-size: 72rpx;">{{cateList[current].pay_fee}}</text> <text>元</text>
                </view>
                <view @click="toConfirm" class="onlinePay">确认预约</view>
            </view>
        </view>
      
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
                cateList:[],
				list: [],
                current:0,
                timeCurrent:0,
                id:"",
                week:['周一','周二','周三','周四','周五','周六','周日'],
				user_id:uni.getStorageSync('userId'),
				yyData:{},
				appointer_id:0
				
				
			}
		},
		
		onReady() {
			
		},
        onLoad(opt) {
            if(opt.id) this.id = opt.id
            this.venueCate()
			this.getAllpointer()
			let vm =this
				this.getPointer()
			uni.$on('getPointer',(data=>{
				console.log(data)
				vm.appointer_id= data.appointer_id
				vm.yyData.realname=data.realname
				vm.yyData.phone=data.phone
				vm.getAllpointer()
			}))
            // this.getList()
        },
			
		onUnload(){
			uni.$off('getPointer')
		},
		onShow() {
		
		
		},
		methods: {
			async getPointer(){
				
					const data =await this.$api.venueAppointer({user_id:this.user_id}) 
					console.log(data)
					this.yyData = data.data
			},
			getAllpointer(){
				this.$api.myAppointer({user_id:uni.getStorageSync('userId')}).then(res=>{
					this.list = res.data
					this.appointer_id=res.data.id
				})
			},
            
            async venueCate(){
              const {data,code}  =     await this.$api.venueOpenTime({venueId:this.id})
              if(code==200){
                  this.cateList = data
				  
                  // this.getList()
              }
            },
            // async getList(){
            //     let id = this.cateList[this.current].id
            //   const {data,code}  =     await this.$api.venueList({categoryId:id})
            //   console.log(code,data)
            //   if(code==200){
            //       this.list = data
            //   }
            // },
            change(index){
                this.current = index
				
                
            },
            call(){
                uni.makePhoneCall({
                    phoneNumber:'110'
                })
            },
            add(){
                uni.navigateTo({
                    url:'/pages/userApply/index'
                })
            },
            toConfirm(){
					
				let form = {
					pay_fee:this.cateList[this.current].pay_fee,
					appointer_id:this.appointer_id,
					venue_time_id:this.cateList[this.current].id,
					venue_id:this.id,
					people:this.yyData.realname,
					phone:this.yyData.phone
				}
               uni.navigateTo({
                   url:'/pages/sessionConfirm/index?form='+JSON.stringify(form)+'&timeId='+this.current
               }) 
            }
		}
	}
</script>
<style scoped lang="scss">
                
            .header{
                image{
                    width: 100%;
                    height: 300rpx;
                }
            }
                
            .cateItem{
                font-weight: 500;
                font-size: 24rpx;
                color: #3D3D3D;
                border: 2rpx solid #D3D3D3;
                padding: 16rpx  56rpx;
                border-radius: 86rpx;
                margin-right: 24rpx;
            }
                
            .active{
                border: 2rpx solid #2CC6A1;
                color: #2CC6A1;
            }
        .artItem {
            font-size: 24rpx;
            color: #9F9F9F;
            padding-bottom: 44rpx;
            box-sizing: border-box;
            border-bottom: 2rpx solid #eee;
            image{
                width: 270rpx;
                height: 202rpx;
                border-radius: 12rpx ;
                margin-right: 32rpx;
            }
            
            .name{
                font-size: 32rpx;
                color: #3D3D3D;
                margin-bottom: 8rpx;
            }
        }
        .moduleTitle{
            font-weight: 600;
            font-size: 32rpx;
            color: #000000;
        }
        .right{
           width: 140rpx;
           height: 80rpx;
            background: #fff;
            border: 2rpx solid #2CC6A1;
            border-radius: 60rpx ;
            font-size: 28rpx;
            color: #2CC6A1;
            text-align: center;
            line-height: 80rpx;
            
        }
        .timeBox{
                border: 2rpx solid #BFBFBF;
                display: inline-block;
                padding: 22rpx 42rpx 22rpx 22rpx;
                border-radius: 12rpx;
                font-size: 32rpx;
                color: #3d3d3d;
                font-weight: 500;
        }
        .paybtn{
            
            position: fixed;
            bottom: 0;
            width: 100%;
            padding: 30rpx;
            background-color: #fff;
            .onlinePay{
                width: 324rpx;
                height: 92rpx;
                background: #FFFFFF;
                border-radius: 12rpx ;
                border: 2rpx solid #2CC6A1;
                font-size: 32rpx;
                color: #2CC6A1;
                line-height: 92rpx;
                background: #2CC6A1;
                color: #fff;
                text-align: center;
            }
                
            .freebtn{
                text{
                    color: #FF9012;
                }
            }
          
        }
</style>